import React, {Component} from 'react';
import fetchJsonp from "fetch-jsonp";

import {LeftOutlined} from '@ant-design/icons'

import {Alert, Button, Spin} from 'antd';

class MovieDetail extends Component {
  constructor(props){
    super(props)
    this.state = {
      info: {},
      isLoading: true
    }
  }
  componentDidMount(){
    fetchJsonp(`https://api.douban.com/v2/movie/subject/${this.props.match.params.id}?apikey=0df993c66c0c636e29ecbb5344252a4a`)
      .then(response => response.json())
      .then(data => {
        this.setState({
          info: data,
          isLoading: false
        })
      })
      .catch(err => {
        console.log(err)
      })
    
    // var data = require('../../test_data/movieDetail')
    // this.setState({
    //   info: data,
    //   isLoading: false
    // })
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.goBack}>
          <LeftOutlined />返回电影列表页面
        </Button>
        {this.loadInfo()}
      </div>
    );
  }
  goBack = () => {
    this.props.history.go(-1)
  }
  
  // 缓存加载数据
  loadInfo = () => {
    if (this.state.isLoading){
      return <Spin tip="Loading...">
        <Alert
          message="正在加载电影详情"
          description="精彩内容马上呈现..."
          type="info"
        />
      </Spin>
    } else{
      return <div>
        <div style={{textAlign:'center'}}>
          <h1>{this.state.info.title}</h1>
          <img src={this.state.info.images.large} alt="封面" style={{margin:'10px'}}/>
        </div>
        <p>{this.state.info.summary}</p>
      </div>
    }
  }
}

export default MovieDetail;
